import { LockTwoTone, UserOutlined } from '@ant-design/icons';
import { Alert, Space, message, Tabs } from 'antd';
import React, { useState, useEffect } from 'react';
import ProForm, { ProFormCaptcha, ProFormCheckbox, ProFormText } from '@ant-design/pro-form';
import { connect, useIntl, FormattedMessage } from 'umi';
import { getCaptcha } from '@/services/login';
import styles from './index.less';
import { DefaultFooter } from '@ant-design/pro-layout';

const LoginMessage = ({ content }) => (
  <Alert
    style={{
      marginBottom: 24,
    }}
    message={content}
    type="error"
    showIcon
  />
);

const Login = (props) => {
  const { userLogin = {}, submitting, dispatch } = props;
  const { status, type: loginType, captchaUrl } = userLogin;
  const [type, setType] = useState('account');
  const intl = useIntl();
  useEffect(() => {
    if (dispatch) {
      handleGetCaptcha();
    }
  }, []);

  const handleGetCaptcha = () => {
    dispatch({
      type: 'login/captcha',
    });
  };

  const handleSubmit = (values) => {
    const { dispatch } = props;
    dispatch({
      type: 'login/login',
      payload: { ...values, type },
    });
    handleGetCaptcha();
  };

  return (
    <div className={styles.main}>
      <ProForm
        initialValues={{
          autoLogin: false,
        }}
        submitter={{
          searchConfig: {
            submitText: '登录',
          },
          render: (_, dom) => dom.pop(),
          submitButtonProps: {
            loading: submitting,
            size: 'large',
            style: {
              width: '100%',
            },
          },
        }}
        onFinish={async (values) => {
          handleSubmit(values);
        }}
      >
        {status === 'error' && loginType === 'account' && !submitting && (
          <LoginMessage
            content={'账户或密码错误'}
          />
        )}
        {type === 'account' && (
          <>
            <ProFormText
              name="number"
              fieldProps={{
                size: 'large',
                prefix: <UserOutlined className={styles.prefixIcon} />,
              }}
              placeholder={'工号'}
              rules={[
                {
                  required: true,
                  message: '请输入工号！',
                },
              ]}
            />
            <ProFormText.Password
              name="password"
              fieldProps={{
                size: 'large',
                prefix: <LockTwoTone className={styles.prefixIcon} />,
              }}
              placeholder={'密码'}
              rules={[
                {
                  required: true,
                  message: '请输入密码！',
                },
              ]}
            />
            <ProFormText
              name="code"
              fieldProps={{
                size: 'large',
                prefix: (
                  <img
                    src={captchaUrl}
                    onClick={handleGetCaptcha}
                    alt=""
                    style={{
                      marginRight: 15,
                    }}
                  />
                ),
              }}
              placeholder={'请输入验证码'}
              rules={[
                {
                  required: true,
                  message: '请输入验证码！',
                },
              ]}
            />
          </>
        )}
      </ProForm>

    </div>
  );
};

export default connect(({ login, loading }) => ({
  userLogin: login,
  submitting: loading.effects['login/login'],
}))(Login);
